<template>
	<view class="nav display_flex jusc_around alit_center">
		<my-icon icon="iconzhibo"></my-icon>
		<view class="display_flex jusc_around alit_center tab">
			<block v-for="(item, index) in list" :key="index">
				<view class="item" :class="select == index ? 'select' : ''" @click="click(index)">{{ item.name }}</view>
			</block>
			<view class="tab_line" :style="lineStyle"></view>
		</view>
		<my-icon icon="iconsousuo"></my-icon>
	</view>
</template>

<script>
export default {
	data() {
		return {
			select: 2,
			num:0,
			list: [
				{
					name: '同城'
				},
				{
					name: '关注'
				},
				{
					name: '推荐'
				}
			],
		};
	},
	computed:{
		lineStyle(){
			return 	`transform:translate(${this.num}rpx,0);`
		}
	},
	methods: {
		click(index) {
			if(this.select==index)return
			this.num = (index-2)*120
			this.select = index;
			this.$emit('click', index);
		}
	}
};
</script>

<style lang="scss">
.nav {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	height: 35px;
	line-height: 35px;
	margin: 0 auto;
	z-index: 20;
	.item {
		color: #808080;
	}
	.select {
		color: #fff;
	}
	.tab{
		width: 360rpx;
		position: relative;
		.tab_line{
			position: absolute;
			bottom: 0;
			right: 30rpx;
			width:60rpx;
			height:2px;
			background-color: #FFFFFF;
			border-radius: 2rpx;
			transition-duration:0.35s;
		}
	}
	
}
</style>
